<template>
  <div class="page flex-col">
    <div class="group_3 flex-col"><div class="group_1 flex-col"></div></div>
    <div class="group_4 flex-col"></div>
    <div class="block_3 flex-col">
      <div class="group_2 flex-col">
        <span class="text_1">用户协议与隐私政策</span>
        <span class="text_2"
          >感谢您使用本软件！我们非常重视您的隐私保护和个人信息保护，为帮助您安全使用产品和服务,请必仔细阅读并透彻理解《用户协议》及《隐私政策》所述内容。如您同意以上条款请点击“同<br />意”，以便为您提供更好的服务。</span
        >
        <div class="box_2 flex-row justify-between">
          <div class="text-wrapper_1 flex-col">
            <span class="text_3">暂不使用</span>
          </div>
          <a href="./tip" class="text-wrapper_2 flex-col">
            <span class="text_4">同意</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      constants: {},
    };
  },
  methods: {},
};
</script>

<style scoped>
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 7.5rem;
  height: 100%;
  overflow: hidden;
}

.group_3 {
  width: 7.5rem;
  height: 15.37rem;
  margin-bottom: 0.01rem;
}

.group_1 {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 6px;
  width: 2.7rem;
  height: 0.12rem;
  margin: 15.12rem 0 0 2.4rem;
}

.group_4 {
  z-index: 6;
  position: absolute;
  left: 0;
  /* top: 0.79rem; */
  width: 7.5rem;
  height: 100%;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psjqcoyvzf1pjse5orwyyxtps37lfa4e9ro1ab4b568-b968-494c-a34e-42403cdd2303) -0.14rem
    0rem no-repeat;
  background-size: 7.65rem 14.66rem;
}

.block_3 {
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 7;
  height: 16.24rem;
  width: 7.5rem;
  position: absolute;
  left: 0;
  top: 0;
}

.group_2 {
  box-shadow: 0px 28px 46px 0px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20px;
  width: 6.9rem;
  height: 5.32rem;
  margin: 0 auto;
  margin-top: 3.5rem;
}

.text_1 {
  width: 3.23rem;
  height: 0.35rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.36rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.36rem;
  margin: 0.57rem 0 0 1.83rem;
}

.text_2 {
  width: 5.93rem;
  height: 1.72rem;
  color: rgba(102, 102, 102, 1);
  font-size: 0.28rem;
  text-align: left;
  line-height: 0.36rem;
  margin: 0.49rem 0 0 0.4rem;
}

.box_2 {
  width: 6.14rem;
  height: 0.9rem;
  margin: 0.65rem 0 0.64rem 0.38rem;
}

.text-wrapper_1 {
  border-radius: 45px;
  height: 0.9rem;
  border: 2px solid rgba(153, 153, 153, 1);
  width: 2.87rem;
}

.text_3 {
  width: 1.3rem;
  height: 0.33rem;
  color: rgba(136, 136, 136, 1);
  font-size: 0.34rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.34rem;
  margin: 0.29rem 0 0 0.79rem;
}

.text-wrapper_2 {
  background-image: linear-gradient(
    270deg,
    rgba(182, 220, 255, 1) 0,
    rgba(182, 220, 255, 1) 0,
    rgba(185, 182, 229, 1) 100%,
    rgba(185, 182, 229, 1) 100%
  );
  border-radius: 45px;
  height: 0.9rem;
  width: 2.87rem;
}

.text_4 {
  width: 0.64rem;
  height: 0.32rem;
  color: rgba(45, 50, 67, 1);
  font-size: 0.34rem;
  text-align: center;
  white-space: nowrap;
  line-height: 0.34rem;
  margin: 0.29rem 0 0 1.12rem;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}
</style>
